<template>
  <view class="container">
    <view class="form">
      <view class="row">
        <view class="right-flex">
          <picker @change="changeType" :value="typeIndex" :range="type_list">
            <view>{{ type_list[typeIndex] }}</view>
          </picker>
          <image class="icon" src="../../static/images/bottom.png"></image>
          <input :value="typeIndex + 1" name="type" style="display: none"/>
        </view>
      </view>
      <view class="row">
        <view class="right-flex">
          <textarea class="textarea" @input="changeContent" name="content"/>
        </view>
      </view>
      <view class="row">
        <view class="images">
          <view class="img-box" v-for="(item, index) in imgs_arr" :key="index">
            <image class="img" :src="item.path" mode="aspectFill"></image>
            <image class="del" @click="delImg(index)" src="/static/images/del.png"></image>
          </view>
        </view>
      </view>

      <view class="row">
        <view class="upload-box" @click="uploadImgs()" style="width: 220rpx;height: 220rpx;">
          <image class="upload-img" src="/static/images/upload.png"></image>
        </view>
      </view>

      <view class="btn" @click="formSubmit">提交</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      type_list: ['建议', '投诉'],
      typeIndex: 0,
      content: '',
      max_length: 3,// 最大上传图片数量
      imgs_arr: [],// 上传图片集合，用于显示
    };
  },

  onLoad: function (options) {

  },

  methods: {
    changeType: function (e) {
      this.typeIndex = e.detail.value;
    },

    changeContent: function (e) {
      this.content = e.detail.value;
    },


    uploadImgs: function () {
      var max_length = this.max_length, //最多上传图片数量
        imgs_length = this.imgs_arr.length,
        count = max_length - imgs_length;

      if (count <= 0) {
        uni.showToast({
          title: '最多上传 ' + max_length + ' 张图片',
          icon: 'none'
        })
        return;
      }

      this.$common.uploadImgs(count, res => {
        res = JSON.parse(res);
        if (res.result == 1) {
          var img = res.data,
            imgs_arr = this.imgs_arr;

          imgs_arr.push(img);
          this.imgs_arr = imgs_arr;

          uni.showToast({
            title: '上传成功',
            duration: 1000
          })
        } else {
          uni.showToast({
            title: res.msg,
            icon: 'none'
          })
        }
      })
    },

    delImg: function (index) {
      var imgs_arr = this.imgs_arr;

      imgs_arr.splice(index, 1);

      this.imgs_arr = imgs_arr
    },

    formSubmit: function (e) {
      var user_id = uni.getStorageSync('user_id'),
        type = parseInt(this.typeIndex) + 1,
        content = this.content,
        imgs_arr = this.imgs_arr,
        imgs = imgs_arr.map(item => item.id).join(','),
        timestamp = Date.parse(new Date()),//该值除以1000就是当前的时间戳,
        sync_timestamp = uni.getStorageSync('timestamp') ? uni.getStorageSync('timestamp') : 0,//获取时间戳缓存,
        now_timestamp = timestamp / 1000,
        long_time = now_timestamp - sync_timestamp;//距离上次点击按钮经过的时长（秒）,

      uni.showLoading({
        title: '提交中...',
        mask: true
      })

      if (long_time > 3) {
        //将当前时间戳存为缓存
        uni.setStorageSync('timestamp', timestamp / 1000);

        this.$http.post('/index/Api/addFeedback', {user_id, type, content, imgs}).then(res => {
          uni.removeStorageSync('timestamp');
          uni.hideLoading();

          if (res.data.result == 1) {
            uni.showToast({
              title: res.data.msg,
              success: () => {
                setTimeout(() => {
                  uni.navigateBack();
                }, 500)
              }
            })
          } else {
            this.$common.doErrorResult(res);
          }
        })
      }

    }
  },
}
</script>

<style lang="scss">
.container {
  padding: 0 20rpx;
  height: 100vh;
  background: #fff;

  .form {
    .row {
      display: flex;
      padding-top: 20rpx;

      .right-flex {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border: 1rpx solid #f5f5f5;
        padding: 20rpx;
        border-radius: 20rpx;
        flex: 1;

        picker {
          color: #8C8888;
          width: 100%;
        }

        .icon {
          width: 20rpx;
          height: 20rpx;
        }

        .textarea {
          width: calc(100% - 40rpx);
        }
      }

      .images {
        display: flex;
        flex-wrap: wrap;
        flex: 1;

        .img-box {
          width: 220rpx;
          height: 220rpx;
          position: relative;
          margin-right: calc((100% - 660rpx) / 2);

          &:last-child {
            margin-right: 0;
          }

          .img {
            width: 100%;
            height: 100%;
          }

          .del {
            position: absolute;
            right: 0;
            top: 0;
            width: 50rpx;
            height: 50rpx;
          }
        }
      }
    }

    .btn {
      width: calc(100% - 40rpx);
      height: 80rpx;
      position: fixed;
      left: 20rpx;
      bottom: 40rpx;
      z-index: 999;
      background-color: #32a4ff;
      color: #fff;
      border-radius: 40rpx;
      text-align: center;
      font-size: 32rpx;
      line-height: 80rpx;
    }
  }
}
</style>

